<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<!-- base标签为页面上的所有链接规定默认地址或默认目标 -->
<base href="<%=basePath%>">
<meta charset="UTF-8">
<!-- 链接外部css文件 -->
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/order-list.css">
<link rel="stylesheet" href="">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-paginator.min.js"></script>
<script src="js/header.js"></script>
<script src="js/order-list.js"></script>
</head>
<body>
	<jsp:include page="common/header.jsp"></jsp:include>
	<div class="contrain">
		<div class="panel panel-default">
			<div class="panel panel-heading">
				<h4>所有申请</h4>
			</div>
			<div class="panel panel-body">
				<div class="row orderBox"
					style="border-bottom: 1px solid #d4d0cd; border-top: 1px solid #d4d0cd; padding-bottom: 1%">
					<c:forEach var="order" items="${orderList}">
						<div style="border-bottom: 1px solid #d4d0cd">
							<dl class="dl-horizontal">
								<dt class="col-xm-4" style="padding-left: 0%; padding-top: 0">
									<a
										href="http://localhost:8080/distribute-portal/order/order-detail/${order.orderId }.html"
										class="thumbnail"> <img src="${order.orderItem.picPath }"
										alt="缩略图"></a>
								</dt>
								<dd class="col-xm-8 col-xm-offset-6" style="padding-top: 0%">
									<ul class="list-inline">
										<li><p>申请id:${order.orderId}</p></li>
										<jsp:useBean id="dateValue" class="java.util.Date" />
										<jsp:setProperty name="dateValue" property="time"
											value="${order.createTime}" />
										
										<li><p>申请时间:<fmt:formatDate value="${dateValue}"
											pattern="MM/dd/yyyy HH:mm" /></p></li>
									</ul>
									<ul class="list-inline">
										<li><p>宠物名:${order.orderItem.name}</p></li>
										<li><p>
												申请状态:
												<c:if test="${order.status==1}">
													<font color="blue">申请成功
												</c:if>
												<c:if test="${order.status==3}">
													<font color="green">审核中</font>
												</c:if>
												<c:if test="${order.status==2}">
													<font color="red">申请失败</font>
												</c:if>
											</p></li>
									</ul>
								</dd>
							</dl>
						</div>
					</c:forEach>
				</div>
			</div>
			<div class="panel panel-footer">
				<ul id='pg-element'></ul>
			</div>
		</div>
	</div>


</body>
<!-- 引入外部javascript文件 -->
<script type="text/javascript">
	$(function() {
		//设置分页插件
		var element = $('#pg-element');
		options = {
			bootstrapMajorVersion : 3, //对应的bootstrap版本
			currentPage : '${page }', //当前页数，这里是用的EL表达式，获取从后台传过来的值
			numberOfPages : 10, //每页页数
			totalPages : '${totalPages }', //总页数，这里是用的EL表达式，获取从后台传过来的值
			shouldShowPage : true,//是否显示该按钮
			itemTexts : function(type, page, current) {//设置显示的样式，默认是箭头
				switch (type) {
				case "first":
					return "首页";
				case "prev":
					return "上一页";
				case "next":
					return "下一页";
				case "last":
					return "末页";
				case "page":
					return page;
				}
			},
			//点击事件
			onPageClicked : function(event, originalEvent, type, page) {
				location.href = "http://localhost:8080/distribute-portal/order/order-list/${user.id}.html?page="
						+ page;
			}
		};
		element.bootstrapPaginator(options);
	});
</script>
</html>
